import Taro, { Component } from '@tarojs/taro'
import { View, ScrollView } from '@tarojs/components'
import { AtTabs, AtTabsPane } from 'taro-ui'
import { DNavBar, DLogisticsInfo, DItemError, DModal } from '@/components'
import './mylogistics.scss'
import http from '@/api'
export default class MylogisticsBox extends Component {

    constructor(props) {
        super(props)
        this.state = {
            active: 0,
            isOpened: false,
            isModal: false,
            modalText: '',
            value: '',
            obj1: {
                page: 1,
                limit: 10
            },
            obj2: {
                page: 1,
                limit: 10
            },
            scrollStyle: window.screen.availHeight,
            totalPage1: 1,
            totalPage2: 1,
            footerStatus1: false,
            footerStatus2: false,
            list: [],
            list1: [],
            list2: [],
            id: '',
            listStatus: false
        }
    }
    componentWillMount() {
        // this.getMyTrans()
        let {active = 0} = this.$router.params 
        this.handleClick(+active)
    }

    componentDidShow() {
        let { active = 0, listStatus } = this.state
        if (listStatus) {
            return
        }
        if (active === 0) {
            this.setState({
                list: [],
                list1: [],
                totalPage1: 1,
                obj1: {
                    ...this.state.obj1,
                    page: 1,
                    limit: 10
                },
                listStatus: true
            }, () => this.getMyTrans())
        } else if (active === 1) {
            this.setState({
                list: [],
                list2: [],
                totalPage2: 1,
                obj2: {
                    ...this.state.obj2,
                    page: 1,
                    limit: 10
                },
                listStatus: true
            }, () => this.getMyTrans())
        }
    }
    //已过期
    getMyOverdueTrans() {
        let { page, limit } = this.state.obj2
        let obj = {
            page,
            limit
        }
        let { totalPage2 } = this.state
        if (obj.page > totalPage2) {
            this.setState({
                footerStatus2: true
            })
            return
        }

        http.getMyOverdueTrans(obj).then(res => {
            if (!res) {
                return
            }
            let { list2 } = this.state
            res.list.map(item => {
                list2.push({
                    startplace: `${item.cdStart}`,
                    endplace: `${item.cdEnd}`,
                    time: `${item.cdStartTime}`,
                    money: `${item.cdPreMoney}元`,
                    ago: `${item.ago}`,
                    id: `${item.id}`
                })
            })

            this.setState({
                list: list2,
                totalPage2: res.totalPage ? res.totalPage : 1,
                listStatus: false
            })
        })
    }
    //寻找中
    getMyTrans() {
        let { page, limit } = this.state.obj1
        let obj = {
            page,
            limit
        }
        let { totalPage1 } = this.state
        if (obj.page > totalPage1) {
            this.setState({
                footerStatus1: true
            })
            return
        }

        http.getMyTrans(obj).then(res => {
            if (!res) {
                return
            }
            let { list1 } = this.state
            res.list.map(item => {
                list1.push({
                    // startplace: `${item.cdStartDetail}`,
                    // endplace: `${item.cdEndDetail}`,
					// fixed by   author  xiaomo when 1/20
					startplace: `${item.cdStart}`,
					endplace: `${item.cdEnd}`,
                    time: `${item.cdStartTime}`,
                    money: `${item.cdPreMoney}元`,
                    ago: `${item.ago}`,
                    id: `${item.id}`
                })
            })

            this.setState({
                list: list1,
                totalPage1: res.totalPage ? res.totalPage : 1,
                listStatus: false
            })
        })
    }
    handleClick(active) {
        this.setState({
            list: [],
            list1: [],
            list2: [],
            active,
            listStatus: true,
            footerStatus1: false,
            footerStatus2: false,
            totalPage1: 1,
            obj1: {
                ...this.state.obj1,
                page: 1,
                limit: 10
            },
            totalPage2: 1,
            obj2: {
                ...this.state.obj2,
                page: 1,
                limit: 10
            }
        }, () => {
            if (active === 0) {
                this.getMyTrans()
            } else if (active === 1) {
                this.getMyOverdueTrans()
            }
        })

    }
    onScroll1 = () => {
        this.setState({
            obj1: {
                ...this.state.obj1,
                page: this.state.obj1.page + 1
            }
        }, () => {
            this.getMyTrans()
        })
    }
    onScroll2 = () => {
        this.setState({
            obj2: {
                ...this.state.obj2,
                page: this.state.obj2.page + 1
            }
        }, () => {
            this.getMyOverdueTrans()
        })
    }
    handleDetail(id, _btnName) {
        localStorage.setItem('_btnName', _btnName)
        Taro.navigateTo({
            url: `/pages/logisticsinfodetail/logisticsinfodetail?id=${id}&type=logisticsinfodetail`
        })
    }
    //删除
    delTrans(id) {
        http.delTrans({ id: `${id}` }).then(res => {
            this.setState({
                obj2: {
                    ...this.state.obj2,
                    page: 1
                },
                list2: [],
            }, () => {
                Taro.showToast({
                    title:'删除成功',
                    mask:true,
                    duration:800
                }).then(res=>[
                    setTimeout(() => {
                        this.getMyOverdueTrans()    
                    }, 1000)
                ])
               
            })
        })
    }
    handleDelTrans(id) {
        this.setState({
            id: id,
            modalText: '确定要删除订单吗？',
            isModal: true,
            modalType: 1
        })
    }
    onLastHandle() {
        this.setState({
            isModal: false
        })
        let { id, modalType } = this.state
        if (modalType === 1) {
            this.delTrans(id)
        }
        if (modalType === 2) {
            this.leaveTrans(id)
        }
    }
    //下架
    leaveTrans(id) {
        http.leaveTrans({ id: `${id}` }).then(res => {
            this.setState({
                obj1: {
                    ...this.state.obj1,
                    page: 1,
                },
                list1:[]
            }, () => {
                // this.getMyTrans()
                  Taro.showToast({
                    title: '下架成功',
                    duration: 800,
                    mask:true
                }).then(res=>{
                    setTimeout(() => {
                        Taro.redirectTo({
                    url:`/pages/mylogistics/mylogistics?active=1`
                  })
                    }, 1000);
                })
                
            })
        })
    }
    handleLeave(id) {
        this.setState({
            id: id,
            isModal: true,
            modalText: '确定要下架订单吗？',
            modalType: 2
        })
    }
    handleNoclick(){
        return Taro.showToast({
            title:'该物流信息已过期',
            icon: 'none'
        })
    }

    onClose() {
        this.setState({
            isModal: false
        })
    }
    render() {
        const {
            active,
            footerStatus1,
            footerStatus2,
            scrollStyle,
            list,
            modalText,
            isModal
        } = this.state
        const tabList = [{ title: '寻找中' }, { title: '已过期' }]
        return (
            <View className='b_mylogistics'>
                <DNavBar title={'我的物流'}></DNavBar>
                <View className='b_mylogistics__box'>
                    <View className='b_mylogistics__content'>
                        <AtTabs current={active} tabList={tabList} onClick={this.handleClick.bind(this)}>
                            <AtTabsPane>
                                <ScrollView
                                    scrollY
                                    scrollWithAnimation
                                    lowerThreshold='20'
                                    style={`height:${scrollStyle - 90}PX`}
                                    onScrollToLower={this.onScroll1}>
                                    {
                                        list && list.map((item) => {
                                            return <DLogisticsInfo
                                                {...item}
                                                firstText='下架物流'
                                                onHandleDetail={this.handleDetail.bind(this, item.id, '下架')}
                                                onHanldeFirst={this.handleLeave.bind(this, item.id)}></DLogisticsInfo>
                                        })
                                    }

                                    {
                                        footerStatus1 && <View className='b_mylogistics__footer1'>暂无更多</View>
                                    }
                                </ScrollView>
                            </AtTabsPane>
                            <AtTabsPane>
                                <ScrollView
                                    scrollY
                                    scrollWithAnimation
                                    lowerThreshold='20'
                                    style={`height:${scrollStyle - 90}PX`}
                                    onScrollToLower={this.onScroll2}>
                                    {
                                        list && list.map(item => {
                                            return <DLogisticsInfo
                                                {...item}
                                                onHandleDetail={this.handleNoclick.bind(this)}
                                                firstText='删除'
                                                onHanldeFirst={this.handleDelTrans.bind(this, item.id)}></DLogisticsInfo>
                                        })
                                    }
                                    {
                                        footerStatus2 && <View className='b_mylogistics__footer1'>暂无更多</View>
                                    }
                                </ScrollView>
                            </AtTabsPane>
                        </AtTabs>
                    </View>
                </View>
                {list.length === 0 && <DItemError></DItemError>}
                <DModal
                    isShow={isModal}
                    title='撤回订单'
                    text={modalText}
                    firstbtn='取消'
                    lastbtn='确认'
                    onFirst={this.onClose.bind(this)}
                    onCancel={this.onClose.bind(this)}
                    onLast={this.onLastHandle.bind(this)}
                ></DModal>
            </View>
        )
    }
}